/**
 * === SHOWIT + WOO COMMERCE : CHOOSE YOUR EXACT PHOTO ===
 * Removes the native gallery + shortcode to display any specific image
 */

add_action( 'wp', function() {
    if ( ! is_product() ) return;

    // Removes the main image and thumbnails
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

    echo '<style>
        .woocommerce-product-gallery,
        .woocommerce-product-gallery__image,
        .flex-control-thumbs,
        .woocommerce-product-gallery__thumbs,
        .ol-thumbs {
            display: none !important;
        }
    </style>';
}, 999 );

/**
 * SHORTCODE : [product_mockups nr="X"]
 * 
 * → nr="1"  = first image of the gallery
 * → nr="3"  = third image
 * → nr="7"  = seventh image
 * → without nr = entire gallery in list
 */
add_shortcode( 'product_mockups', function( $atts ) {
    global $product;
    if ( ! is_product() || ! $product ) return '';

    $ids = $product->get_gallery_image_ids();
    if ( empty( $ids ) ) return '';

    $a  = shortcode_atts( array( 'nr' => '' ), $atts );
    $nr = trim( $a['nr'] );

    // Single specific image
    if ( $nr !== '' ) {
        $index = intval( $nr ) - 1;
        if ( isset( $ids[$index] ) ) {
            $url = wp_get_attachment_url( $ids[$index] );
            return '<img src="' . esc_url( $url ) . '" style="width:100%; height:100%; object-fit:cover; display:block;" alt="">';
        }
        return '';
    }

    // Bonus mode: entire gallery in list
    $output = '<div class="custom-mockups-gallery">';
    foreach ( $ids as $id ) {
        $url = wp_get_attachment_url( $id );
        $output .= '<div style="margin-bottom:20px;"><img src="' . esc_url( $url ) . '" style="width:100%; height:auto; display:block;" alt=""></div>';
    }
    $output .= '</div>';
    return $output;
});